<template>
  <div class="category">
    <navbar class="navbar">
      <template v-slot:center>
        <p>商品分类</p>
      </template>
    </navbar>
    <div class="content">
      <tab-menu :categories="categories" @selectItem="selectItem"></tab-menu>
      <scroll class="tab-content" ref="scroll">
        <div>
          <tab-content-category
            :subcategories="showSubcategories"
          ></tab-content-category>
          <home-classify :classText="['热搜商品']"></home-classify>
          <beauty :goods="showSubcategoryDetail"></beauty>
        </div>
      </scroll>
    </div>
  </div>
</template>  

<script>
import TabContentCategory from "./childCategory/TabContentCategory";
import TabMenu from "./childCategory/TabMenu";

import Navbar from "components/common/navbar/Navbar";
import Scroll from "components/common/scroll/Scroll";

import HomeClassify from "components/content/classify/HomeClassify";
import beauty from "components/content/beautyShow/beauty";

import { debounce } from "common/utils";

import {
  getCategory,
  subGetCategory,
  getCategoryDetail,
} from "network/category";

export default {
  name: "Category",
  data() {
    return {
      categories: [],
      categoryDate: {},
      currentIndex: -1,
      itemImgListen: null,
    };
  },
  components: {
    Navbar,
    TabMenu,
    Scroll,
    TabContentCategory,
    HomeClassify,
    beauty,
  },
  mounted() {
    const refresh = debounce(this.$refs.scroll.refresh, 500);
    this.itemImgListen = () => {
      refresh();
    };
  },
  activated() {
    this.$bus.on("loadOk", this.itemImgListen);
  },
  computed: {
    showSubcategories() {
      if (this.currentIndex == -1) return {};
      return this.categoryDate[this.currentIndex].subcategories;
    },
    showSubcategoryDetail() {
      if (this.currentIndex == -1) return {};
      return this.categoryDate[this.currentIndex].categoryDetail;
    },
  },
  created() {
    this._getCategory();
  },
  methods: {
    _getCategory() {
      getCategory().then((res) => {
        this.categories = res.data.category.list;
        for (let i = 0; i <= this.categories.length; i++) {
          this.categoryDate[i] = {
            subcategories: {},
            categoryDetail: [],
          };
        }
        this._getSubcategory(0);
      });
    },
    _getSubcategory(index) {
      this.currentIndex = index;
      const mailKey = this.categories[index].maitKey;
      subGetCategory(mailKey).then((res) => {
        this.categoryDate[index].subcategories = res.data;
        this.categoryDate = { ...this.categoryDate };
        this._getSubcategoryDetail();
      });
    },
    _getSubcategoryDetail() {
      const miniWallkey = this.categories[this.currentIndex].miniWallkey;
      getCategoryDetail(miniWallkey).then((res) => {
        this.categoryDate[this.currentIndex].categoryDetail = res;
        this.categoryDate = { ...this.categoryDate };
      });
    },
    selectItem(index) {
      this._getSubcategory(index);
    },
  },
};
</script>

<style scoped>
.category {
  height: 100vh;
}
.navbar {
  background-color: var(--color-tint);
  color: var(--color-background);
  font-weight: 700;
}
.content {
  display: flex;
  position: absolute;
  top: 44px;
  bottom: 49px;
  right: 0px;
  left: 0px;
}
.tab-content {
  height: 100%;
  flex: 1;
}
</style>